<template>
  <div>
    <!-- 修改借款用户资料页面 -->
    <el-card>
      <br />
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-row>
          <br />
          <h3>基本信息</h3>
          <br />
          <el-col :span="12">
            <el-form-item label="手机号码" prop="phone" required>
              <el-input
                type="text"
                v-model="ruleForm.phone"
                placeholder="请输入手机号码"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="真实姓名"
              prop="name"
              required
              v-show="userType == '1'"
            >
              <el-input
                type="text"
                v-model="ruleForm.name"
                placeholder="请输入真实姓名"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="企业名称"
              prop="name"
              required 
              v-show="userType == '0'"
            >
              <el-input
                type="text"
                v-model="ruleForm.name"
                placeholder="请输入企业名称"
              ></el-input>
            </el-form-item>
            <template v-if="userType == '1'">
              <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="ruleForm.gender">
                  <el-radio label="男" checked="checked"></el-radio>
                  <el-radio label="女"></el-radio>
                </el-radio-group>
              </el-form-item>
            </template>
            <template v-else>
              <el-form-item label="法人姓名" prop="legalPersonName" required>
                <el-input
                  type="text"
                  v-model="ruleForm.legalPersonName"
                  placeholder="请输入法人代表姓名"
                ></el-input>
              </el-form-item>
            </template>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户类型" prop="resource">
              <el-radio 
              label="0" 
              v-model="userType"
              disabled
              >
                企业用户
                </el-radio>
              <el-radio 
              label="1" 
              v-model="userType"
              disabled 
              >
                个人用户
              </el-radio>
            </el-form-item>
            <template v-if="userType == '1'">
              <el-form-item label="身份证号" prop="idNum" required>
                <el-input
                  type="text"
                  v-model="ruleForm.idNum"
                  placeholder="请输入身份证号"
                ></el-input>
              </el-form-item>
            </template>
            <template v-else>
              <el-form-item label="税务登记号" prop="tagRegName" required>
                <el-input
                  type="text"
                  v-model="ruleForm.tagRegName"
                  placeholder="请输入营业执照上的税务登记证号"
                ></el-input>
              </el-form-item>
            </template>
            <el-form-item label="邮箱" prop="email" required>
              <el-input
                type="text"
                v-model="ruleForm.email"
                placeholder="请输入常用邮箱"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <br />
        <h3>操作</h3>
        <br />
        <el-form-item label="状态:" required>
          <el-radio-group v-model="ruleForm.lockStatus">
            <el-radio label="正常"></el-radio>
            <el-radio label="锁定"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input type="textarea" v-model="ruleForm.remarks"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >保存修改</el-button
          >
          <el-button @click="go">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
// import TableComponent from '../../components/basic/TableComponent.vue';
import { getUserDetails,submitPersonalInfo,submitCompanyInfo } from "../../http/member";

export default {
  name: "Member4",
  data() {
    /* 判断手机号码格式*/
    let phone = (rule, value, callback) => {
      const reg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (value === "") {
        callback(new Error("请输入电话号码"));
      } else if (!reg.test(value) && value != "") {
        callback(new Error("请输入正确的电话号码"));
      } else {
        callback();
      }
    };

    //判断法人名字不能为空
    let legalPersonName = (rule, value, callback) => {
      if (this.userType == "0" && value === "") {
        callback(new Error("请输入法人姓名"));
      } else {
        callback();
      }
    };

    //判断真实名字 企业名称 不能为空
    let name = (rule, value, callback) => {
      if (this.userType == "1" && value === "") {
        callback(new Error("请输入姓名"));
      } else if (this.userType == "0" && value === "") {
        callback(new Error("请输入企业名称"));
      } else {
        callback();
      }
    };

    //判断身份证格式 18位
    let idNum = (rule, value, callback) => {
      const reg = /^(\d{18,18}|\d{15,15}|\d{17,17}X)$/;
      if (value === "") {
        callback(new Error("请输入身份证号"));
      } else if (!reg.test(value) && value != "") {
        callback(new Error("请输入正确的身份证号"));
      } else {
        callback();
      }
    };

    //判断营业执照上的税务登记证号 15位 全数字
    let tagRegName = (rule, value, callback) => {
      const reg = /^[0-9]{15}$/;
      if (value === "") {
        callback(new Error("请输入税务登记证号"));
      } else if (!reg.test(value) && value != "") {
        callback(new Error("请输入正确的税务登记证号"));
      } else {
        callback();
      }
    };

    //判断邮箱
    let email = (rule, value, callback) => {
      const reg =
        /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/;
      if (value === "") {
        callback(new Error("请输入邮箱号"));
      } else if (!reg.test(value) && value != "") {
        callback(new Error("请输入正确的邮箱号"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: this.getInitRoleForm(),//封装一个对象
      tableData: [],
      userType: "0",
      rules: {
        phone: [{ validator: phone, trigger: "blur" }],
        legalPersonName: [{ validator: legalPersonName, trigger: "blur" }],
        name: [{ validator: name, trigger: "blur" }],
        idNum: [{ validator: idNum, trigger: "blur" }],
        tagRegName: [{ validator: tagRegName, trigger: "blur" }],
        email: [{ validator: email, trigger: "blur" }],
        lockStatus: [
          { required: true, message: "请选择状态", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    //修改按钮
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          (function(that,type) {//判断企业用户还是个人用户类型
            return type == "0" ? 
            submitCompanyInfo(that.$route.params.id,that.ruleForm) :
            submitPersonalInfo(that.$route.params.id,that.ruleForm);
          })(this,this.userType).then(res => {
            if(res.data.code ) {
              this.$message({
                 message: res.data.message,
                 type: res.data.code == 20000 ? "success" : "error"//三元运算符
              })
            }else {
              this.$message.error();
              return false;
            }
            console.log(res);
          }).catch(err => {
            console.log(err);
          })
        } else {
          console.log("表单填写错误");
          return false;
        }
      });
    },
    go() {
      //返回借款用户
      this.$router.back();
      console.log(2345);
    },
  },
  //即可挂载数据
  beforeMount() {
    console.log(this.$route.params.id);
    this.id = this.$route.params.id;
    //获取数据
    getUserDetails(this.id)
      .then((res) => {
        if (res.data.code == 20000) {
          this.tableData = res.data.data.result; //表格数据
        }
      })
      .catch((err) => {
        console.log(err);
      });
  },
  //监听检测数据变化
  watch: {
    tableData () {
      this.ruleForm =this.getInitRoleForm();
      this.userType = this.tableData.userType == "企业用户" ? "0" : "1";
    }
  },
  //过滤返回值
  beforeCreate() {
    const defaultData = {
      phone: "",
      email: "",
      legalPersonName: "", //法人姓名
      name: "",
      gender: "男",
      idNum: "",
      tagRegName: "", //税务登记号
      userType: "企业用户",
      lockStatus: "正常",
      remarks: "",
    };
    //
    this.getInitRoleForm = function () {
      let obj = this._.cloneDeep(defaultData);
      if (this._.isEmpty(this.tableData)) return obj;
      let formCopy = this._.cloneDeep(this.tableData);
      for (let key in defaultData) {
        obj[key] = formCopy[key];
      }
      return obj;
    };
  },
};
</script>

<style scoped>
</style>